<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" ref="filterRef" size="mini" class="form-filter">
            <el-row>
                <el-col :span="12"  style="font-size:20px; font-weight:bold;line-height:40px;">线路段：{{ sectionName }}</el-col>
                <el-col :span="12"  style="display:flex;justify-content: flex-end;">
                    <el-form-item>
                        <el-button @click="showAdd()" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + (page.current - 1) * page.size + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="生效日期"/>
                <el-table-column prop="endTime" label="失效日期"/>
                <el-table-column prop="remark" label="备注"/>
                <el-table-column prop="updateName" label="更新人"/>
                <el-table-column prop="updateTime" label="更新时间"/>
                <el-table-column label="状态" width="80px">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="statusSwitch(scope.row.status,scope.row.id)"
                        />
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <el-button size="mini" @click="showUpdate(scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin-left:10px;">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
            <Add ref="addRef" @refresh="getPage()"/>
            <Update ref="updateRef" @refresh="getPage()"/>
        </div>
    </section>
</template>
<script>
import {LineSectionVersionApi} from '@/api/intercity/LineSectionVersionApi'
import Add from './Add.vue'
import Update from './Update.vue'

export default {
    name: 'ListSectionVersionList',
    components: {
        Add, Update
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {keyword: ''},
            loading: false,
            sectionId: 0,
            sectionName: 0,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.sectionId = this.$router.currentRoute.query.sectionId
        this.sectionName = this.$router.currentRoute.query.sectionName

        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                keyword: this.filter.keyword,
                sectionId: this.sectionId
            }

            this.loading = true
            LineSectionVersionApi.getPage(params).then((response) => {
                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        // 修改状态
        statusSwitch(val, id) {
            const params = {
                id: id,
                status: val
            }

            LineSectionVersionApi.updateStatus(params).then((response) => {
            })
        },

        // 删除数据
        handleDelete(id) {
            LineSectionVersionApi.delete(id).then((response) => {
                this.getPage()
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        showAdd() {
            this.$refs['addRef'].showAdd(this.sectionId)
        },

        showUpdate(data) {
            this.$refs['updateRef'].showUpdate(data)
        }
    }
}

</script>

<style lang="scss" scoped></style>
